<template>
  <div id="me" style="background:#f8f8f8;">
    <!--头部遮罩层-->
    <div class="nav"></div>
    <div class="nav1">
        <div style="margin-top:-5rem;">
            <img style="border-radius:50%;height:18rem;width:18rem;" :src="myUserData.headPortrait" alt="">
        </div>
    </div>
    <div class="nav2"></div>
    <div style="position:absolute;z-index:4;width:100%;">
        <!--用户信息-->
        <div id="myInfo">
            <div class="userImg">
                <img style="" :src="myUserData.headPortrait" alt="" :onerror="logo">
            </div>
            <div class="user">
                <div class="name">
                    <p style="">{{myUserData.nickName}}</p>
                    <img src="../assets/homepage/male.png" alt="" v-if="myUserData.sex=='1'">
                    <img src="../assets/homepage/women.png" alt="" v-else>
                </div>
               <div class="member">
                    <div>
                        <img src="../assets/me/auth.png" alt="">
                        <p><span v-if="myUserData.identification=='1'">已认证</span><span v-else>未认证</span></p>
                    </div>
                    <div>
                        <img src="../assets/me/vip.png" alt="">
                        <p>超级会员</p>
                    </div>
              </div>
            </div>
            <div style="width:30%;line-height:6.25rem;">
                <router-link to="/userInfo"  style="text-decoration:none;">
                <img style="width:0.6rem;height:1.1rem;position:absolute;left:22rem;top:3rem;"src="../assets/me/next-g.png" alt="">
            </router-link></div>

        </div>

        <!--我的订单-->
        <div id="myOrder">

            <div class="order">
                我的订单
                <p @click="orderAll">查看全部订单</p>
          </div>
           <div class="sign">
                <div>
                    <img src="../assets/me/orders.png" alt="">
                    待接单
                </div>
                <div>
                    <img src="../assets/me/confirm.png" alt="">
                    待确认
                </div>
                <div>
                    <img src="../assets/me/cancel.png" alt="">
                    取消/退款
                </div>
                <div>
                    <img src="../assets/me/unevaluate.png" alt="">
                    待评价
                </div>
           </div>
        </div>

      <!--我的校园棒-->
      <div id="mySuperCampus">
            <div class="superCampus"style="">
              我的校园棒
            </div>
            <div class="icon1" style="">
                <div>
                    <router-link :to="{path:'/myWallet/'+myUserData.id}" style="text-decoration:none;">
                        <img src="../assets/me/wallet.png" alt="">
                        我的钱包
                    </router-link>
                </div>
                <div>
                    <a v-if="myUserData.identification=='1'" @click.stop="renzheng" style="text-decoration:none;color:#666">
                        <img src="../assets/me/Authentication.png" alt="">
                        我要认证
                    </a>
                    <router-link v-if="myUserData.identification=='0'" to="/noCertified"  style="text-decoration:none;">
                        <img src="../assets/me/Authentication.png" alt="">
                        我要认证
                    </router-link>
                </div>

                <div>
                    <router-link to="/myEvaluate"  style="text-decoration:none;">
                        <img src="../assets/me/evaluate.png" alt="">
                        我的评价
                    </router-link>
                </div>

                <div>
                    <router-link to="/myTask"  style="text-decoration:none;">
                        <img src="../assets/me/task.png" alt="">
                        我的达人
                    </router-link>
                </div>
                <div>
                    <router-link to="/userMsg"  style="text-decoration:none;">
                        <img src="../assets/me/msg.png" alt="">
                        我的消息
                    </router-link>
                </div>
                <div>
                    <router-link to="/myWelfare"  style="text-decoration:none;">
                        <img src="../assets/me/welfare.png" alt="">
                        我的福利
                    </router-link>
                </div>
            </div>
        </div>

        <!--我的订单-->
        <div id="myBill">
            <div class="bill">
                <p>我的订单</p>
                <p @click="billAll">查看全部账单</p>
            </div>
            <div class="billNum">
                <section>
                    <p>{{countData.incomeSum}}</p>
                    <p>总收入</p>
                </section>
                <section>
                    <p>{{countData.expensesSum}}</p>
                    <p>总支出</p>
                </section>
            </div>
           
        </div>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
        logo: 'this.src="' + require('../assets/homepage/back.png') + '"',
        // logo:'',
        countData:{},
       myUserData:{
           headPortrait:undefined,
           nickName:undefined,
           identification:undefined,
       },
    }
  },
  created(){
      this.curUserSum()
      this.getCurrentUser()
  },
  methods:{
      //查看全部订单
      orderAll(){
          this.$router.push('/moreOrder')
      },
      //查看全部账单
      billAll(){
          this.$router.push('/myBill')
      },
    //  获取总的收入和支出
      curUserSum(){
           this.$api.curUserSum().then((res)=>{
              if(res.code == '000000'){
                  this.countData = res.data
                  console.log(res.data)
              }
          })
      },
    //  获取当前用户的信息
      getCurrentUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                  this.myUserData = res.data
                  if(this.myUserData.nickName.length>5){
                      this.myUserData.nickName = this.myUserData.nickName.substring(0,5)+'...'
                  }
                  console.log('hhhhhhhh')
                  console.log(this.myUserData)
              }
          })
      },
    renzheng(){
        this.$toast('您已经进行过实名认证')
    }

  }
}
</script>
<style>
#me .nav{
    height:20vh;
    width:100%;
    background:#2f9a90;
    position:absolute;
    z-index:1;
    filter: blur(0.41500000000000004rem);
}
#me .nav1{
    height:20vh;
    width:100%;
    overflow:hidden;
    position:absolute;
    z-index:2;
    filter: blur(0.41500000000000004rem);
}
#me .nav2{
    border-bottom:1px solid #ffffff;
    height:20vh;
    width:100%;
    background:rgba(225,225,255,0.83);
    position:absolute;
    z-index:3;
}
#me #myInfo{
    width:100%;
    display:flex;
    height:20vh;
    justify-content:space-between;
}
#me #myInfo .userImg{
    width:20%;
}
#me #myInfo .userImg > img{
    width:4rem;
    height:4rem;
    border:1px solid #DCDFE6;
    border-radius:50%;
    margin:1.5rem 1rem 3rem 1rem;
}
#me #myInfo .user{
    width:38%;
    margin:1.5rem 0px;
}
#me #myInfo .name{
    display:flex;
    justify-content:space-between;
}
#me #myInfo .name > p{
    height:1.75rem;
    font-size:1rem;
    color:#F5F5F5;
}
#me #myInfo .name > img{
    width:1rem;
    height:1rem;
}
#me #myInfo .member{
    margin-top:2.25rem;
    display:flex;
    justify-content:space-between;
}
#me #myInfo .member  img{
    margin-right:0.5rem;
    width:1rem;
    height:1rem;
}
#me #myInfo .member div{
    display:flex;
    justify-content:space-between;
    color:#f8f8f8;
    font-size:0.7rem;
}
#me #myOrder{
    margin-top:1rem;
    margin-bottom:1rem;
    padding:0.6rem;
    background:#fff;
}
#me #myOrder .order{
    display:flex;
    justify-content:space-between;
    width:98%;
    height:3vh;
    line-height:3vh;
    font-size:0.8rem;
}
#me #myOrder .order > p{
    color:#909399;
}
#me #myOrder .order > p::after{
    content:url(../assets/me/next-w.png);
    position: relative;
    top:0.15rem;
    left:0.25rem;
}
#me #myOrder .sign{
    width:95%;
    height:5vh;
    line-height:2rem;
    margin:1rem auto;
    display:flex;
    flex-wrap:wrap;
}
#me #myOrder .sign div{
    width:25%;
    text-align:center;
    height:1.5rem;
    color:#909399;
    font-size:0.7rem;
}
#me #myOrder .sign img{
    display:block;
    margin:auto;
    width:1.8rem;
    height:1.8rem;
}
#me #mySuperCampus{
    margin-bottom:1rem;
    padding:0.6rem;
    background:#fff;
}
#me #mySuperCampus .superCampus{
    height:3vh;
    line-height:3vh;
    font-size:0.8rem;
    color:#000000;
}
#me #mySuperCampus .icon1{
    width:95%;
    height:20vh;
    margin:2vh auto;
    display:flex;
    flex-wrap:wrap;
}
#me #mySuperCampus .icon1 div{
    width:25%;
    text-align:center;
    height:2rem;
    line-height:2rem;
    color:#909399;
    font-size:0.7rem;
}
#me #mySuperCampus .icon1 img{
    display:block;
    margin:auto;
    width:1.8rem;
    height:1.8rem;
}
#me #myBill{
    margin-bottom:1rem;
    padding-top:0.6rem;
    background:#fff;
}
#me #myBill .bill{
    height:3v;
    width:95%;
    line-height:3vh;
    font-size:0;

}
#me #myBill .bill > p:nth-child(1){
    text-align:right;
    width:60%;
    display:inline-block;
    font-size:0.8rem;
}
#me #myBill .bill > p:nth-child(1)::after{
    content:url(../assets/me/bill.png);
    position: relative;
    top:0.35rem;
    left:0.25rem;
}
#me #myBill .bill > p:nth-child(2){
    text-align:right;
    width:40%;
    display:inline-block;
    color:#909399;
    font-size:0.8rem;
}
#me #myBill .bill > p:nth-child(2)::after{
    content:url(../assets/me/next-w.png);
    position: relative;
    top:0.15rem;
    left:0.25rem;
}
#me #myBill .billNum{
    display:flex;
}
#me #myBill .billNum > section{
    width:50%;
    text-align:center;
    margin:1rem 0;
}
#me #myBill .billNum > section p:nth-child(1){
    font-size:1.2rem;color:#29a193
}
#me #myBill .billNum > section p:nth-child(2){
    font-size:1rem;
}
</style>
